import React from 'react';
import {Image} from 'react-native';
import {createBottomTabNavigator,TabBarBottom } from 'react-navigation';
import {createTabScreen} from './createTabScreenOption'

export const TabNavigate = createBottomTabNavigator({
	Home:createTabScreen('首页','Home'),
	List:createTabScreen('精品','List'),
	Commission:createTabScreen('创客中心','Commission'),
	Cart:createTabScreen('购物车','Cart'),
	User:createTabScreen('我的','User')
},
{
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      switch(routeName){
      	case 'Home':
      		iconName = focused?require('../assets/images/icon-home-active.png'):require('../assets/images/icon-home.png');
    		break;
      	case 'List':
      		iconName = focused?require('../assets/images/icon-cancel-active.png'):require('../assets/images/icon-cancel.png');
    		break;
		  	case 'Commission':
		  		iconName = focused?require('../assets/images/icon-money-active.png'):require('../assets/images/icon-money.png');
				break;
				case 'Cart':
					iconName = focused?require('../assets/images/icon-catr-active.png'):require('../assets/images/icon-catr.png');
				break;
		  	case 'User':
		  		iconName = focused?require('../assets/images/icon-more-active.png'):require('../assets/images/icon-more.png');
				break;
      }
      return (
      	<Image source={iconName} style={{width:24,height:24}} />
    	)
      //<Ionicons name={iconName} size={25} color={tintColor} />;
    },
  }),
  animationEnabled: false,
  swipeEnabled: false,
})
